<template>
    <div class="xingche">

        <div class="nav"><img src="../../img/轮播1.jpg" alt=""></div>

        <ul class="some">
            <li>
                <img src="../../img/1.jpg" alt="">
                <div>销量排行</div>
            </li>
            <li>
                <img src="../../img/2.jpg" alt="">
                <div>上市新车</div>
            </li>
            <li>
                <img src="../../img/3.jpg" alt="">
                <div>条件选车</div>
            </li>
            <li>
                <img src="../../img/4.jpg" alt="">
                <div>购车季</div>
            </li>
            <li>
                <img src="../../img/5.jpg" alt="">
                <div>查成交价</div>
            </li>
            <li>
                <img src="../../img/6.jpg" alt="">
                <div>新车特卖</div>
            </li>
            <li>
                <img src="../../img/7.jpg" alt="">
                <div>报价中心</div>
            </li>

        </ul>

        <div class="box5">
            <ul class="list">
                <li>10万以下</li>
                <li>10-15万</li>
                <li>15-20万</li>
                <li>20-30万</li>
            </ul>
            <ul class="list">
                <li>轿车</li>
                <li>SUV</li>
                <li>新能源</li>
                <li>更多</li>
            </ul>

            <ul class="tubiao">
                <li><img src="../../img/丰田.jpg" alt="">
                    <div>丰田</div>
                </li>
                <li><img src="../../img/丰田.jpg" alt="">
                    <div>丰田</div>
                </li>
                <li><img src="../../img/丰田.jpg" alt="">
                    <div>丰田</div>
                </li>
                <li><img src="../../img/丰田.jpg" alt="">
                    <div>丰田</div>
                </li>
                <li><img src="../../img/丰田.jpg" alt="">
                    <div>丰田</div>
                </li>
            </ul>

            <ul class="big">
                <li>
                    <img src="../../img/名爵6.jpg" alt="">
                    <div>名爵6</div>
                </li>
                <li>
                    <img src="../../img/名爵6.jpg" alt="">
                    <div>名爵6</div>
                </li>
                <li>
                    <img src="../../img/名爵6.jpg" alt="">
                    <div>名爵6</div>
                </li>
            </ul>

            <div class="kanguo">
                <div class="left">看过</div>
                <div class="right"><img src="../../img/比亚迪.jpg" alt="">宋PLUS新能源</div>
            </div>

        </div>

        <div class="box9">
            <div class="dibu">
                <div class="img">
                    <img src="../../img/6.jpg" alt="">

                </div>
                <span>宋PLUS新能源<br><small>最低成交价1*2.3万</small><br>查看最低价></span>

            </div>

            <div class="dibu">
                <div class="img">
                    <img src="../../img/6.jpg" alt="">

                </div>
                <span>宋PLUS新能源<br><small>最低成交价1*2.3万</small><br>查看最低价></span>

            </div>
        </div>

    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.xingche {
    .nav {
        margin-top: 15px;
        text-align: center;

        img {
            width: 90%;
            height: 90%;

        }
    }

    .some {
        margin-top: 15px;
        display: flex;
        text-align: center;
        justify-content: space-around;
        overflow: hidden;

        li {

            img {
                width: 80px;
                height: 80px;
            }
        }
    }

    .box5 {
        margin-top: 20px;

        // background-color: beige;
        .list {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 50px;

            li {
                width: 140px;
                height: 50px;
                background-color: antiquewhite;
            }
        }

        .tubiao {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            text-align: center;

            li {
                img {
                    width: 100px;
                    height: 100px;

                }
            }
        }

        .big {
            display: flex;
            justify-content: space-around;
            text-align: center;

            li {
                img {
                    width: 180px;
                    height: 130px;
                }
            }
        }

        .kanguo {
            height: 80px;
            display: flex;
            margin-left: 30px;
            margin-top: 15px;

            .right {
                margin-left: 50px;

                img {
                    width: 50px;
                    height: 50px;
                }
            }
        }

    }

    .dibu {
        .two {
            width: 50%;
            height: 500px;

            img {
                width: 100px;
                height: 100px;
            }
        }
    }

    .box9 {
        display: flex;

        .dibu {
            display: flex;
            width: 50%;
            background-color: white;
            margin-left: 25px;

            .img {

                img {
                    width: 100px;
                    height: 100px;
                }
            }

            span {
                small {
                    color: red;
                }
            }
        }
    }


}
</style>